
<!-- 用户填写终端编码，销售员号，密码，验证码实现微信号和终端编码的绑定，已舍弃该方式 -->

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <title>用户注册绑定</title>
    
	
	 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
	<link href="dist/css/bootstrapValidator.css" rel="stylesheet">

	<!-- 可选的Bootstrap主题文件（一般不使用） -->
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	
	<script src="dist/js/bootstrapValidator.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		function flushValidateCode(obj) {
			/*** 
			  *   获取当前的时间作为参数，无具体意义    
			  *   每次请求需要一个不同的参数，否则可能会返回同样的验证码     
			  *   这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。   
			  */ 
			  var timenow = new Date().getTime();
			obj.src="servlet/ValidateCodeServlet?d=" + timenow;
		}
	</script>

  </head>
  
<body>
<div class="container">
    <header>
        <h2>用户信息绑定</h2>
    </header>
    <form id="bindForm" action="servlet/BindServlet" method="post" role="form">

        <div class="form-group">
        <div class="input-group has-feedback">
   					<span class="input-group-addon">
   						<span class="glyphicon glyphicon-print"></span>
   					</span>
                    <input type="tel" class="col col-lg-2 form-control input-lg" name="terminalNo" maxlength="13" placeholder="请输入您的终端编码">
                </div>
        </div>
        
		<div class="form-group">
        <div class="input-group">
   					<span class="input-group-addon">
   						<span class="glyphicon glyphicon-user"></span>
   					</span>
                    <input  type="tel" class="col col-lg-2 form-control input-lg" name="salerNo" maxlength="3" placeholder="请输入您的销售员编号" >
                </div>
        </div>

        <div class="form-group  has-feedback">
            <div class="input-group">
   					<span class="input-group-addon">
   						<span class="glyphicon glyphicon-lock"></span>
   					</span>
                <input  type="password" class="col col-lg-2 form-control input-lg" name="password" placeholder="请输入您的密码" >
            </div>
        </div>


        <div class="form-group has-feedback">
            <div class="input-group">
            	<input type="text" class="input-sm " name="code" placeholder="请输入四位验证码">
            	<img src="servlet/ValidateCodeServlet" class="col-sm-6" onclick="flushValidateCode(this);" title="看不清，点击刷新" style="cursor: pointer;">
        	</div>
        </div>
        <br>

        <button type="submit" class="btn btn-primary btn-large btn-block">提交</button>
    </form>
</div>

<script type="text/javascript">
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    };
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#bindForm').bootstrapValidator({
//        live: 'disabled',
        message: 'error',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            terminalNo: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    },
                    regexp: {
                        regexp: /[0-9]{13}/,
                        message: '请输入13位终端编码，纯数字'
                    }
                }
            },
            
            salerNo: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    },
                    regexp: {
                        regexp: /[0-9]{3}/,
                        message: '请输入3位销售员编号，纯数字'
                    }
                }
            },
            
            password: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: '请填写密码'
                    }
                }
            },
            
            code: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: '请填写验证码'
                    },
                    remote:{
                    	url: './servlet/ValidateCodeServlet',
                    	type: 'POST',
                    	delay: 2000,
                    	message: '验证码不正确'
                    }
                    }
            }
           
        }
    });

    // Validate the form manually
    $('#validateBtn').click(function() {
        $('#defaultForm').bootstrapValidator('validate');
    });

    $('#resetBtn').click(function() {
        $('#defaultForm').data('bootstrapValidator').resetForm(true);
    });
});
</script>
</body>
</html>
